import React from 'react';
import { TabBar } from 'antd-mobile';
import { 
  AppstoreOutline, 
  TeamOutline, 
  VideoOutline 
} from 'antd-mobile-icons';
import './TabBar.scss';

interface TabBarProps {
  activeKey: string;
  onChange: (key: string) => void;
}

const CustomTabBar: React.FC<TabBarProps> = ({ activeKey, onChange }) => {
  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppstoreOutline />,
    },
    {
      key: 'circle',
      title: '病友圈',
      icon: <TeamOutline />,
    },
    {
      key: 'video',
      title: '视频',
      icon: <VideoOutline />,
    },
  ];

  return (
    <div className="custom-tab-bar">
      <TabBar
        activeKey={activeKey}
        onChange={onChange}
        className="tab-bar"
      >
        {tabs.map(item => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
            className="tab-item"
          />
        ))}
      </TabBar>
    </div>
  );
};

export default CustomTabBar;
